<template>
    <div class="flex p-t p-b cursor-p withFull" v-if="info">
        <el-card>
            <div class="ad-img" style="width: 382px;height: 382px;">
                <imgView type="ad" :src="info.atlas[0]" />
            </div>
        </el-card>
        <div style="height: 382px;padding-left:46px;">
            <div class="count">
                  <div>
                      <div class="title">{{ info.title}}</div>
                      <div class="desc omit-2">{{ info.desc }}</div>
                  </div>
                  <div class="price"> 
                        <div class="p1"><span class="p1-1">优惠价￥</span> <span class="p1-2">{{ info.price }}</span> </div>
                        <span class="p2">原价￥{{ info.p2 }}</span>
                    </div>
                    <!-- <div class="p-t">
                        <span>配送至</span>
                        <el-cascader
                            size="large"
                            :options="regionData"
                            v-model="selectedOptions"
                            placeholder="选择收货地址"
                        >
                        </el-cascader>
                        <span style="color:#333;margin-left:18px;">有货</span>
                        <span>运费*元，满*元包邮</span>
                    </div> -->
                    <div class="p-t">
                        <span>数量</span>
                        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
                    </div>
                    <div class="btn">
                        <div class="btn1" @click.stop="purchase(info)">立即购买</div>
                        <div class="btn2" @click.stop="trySee(info)">试看</div>
                    </div>
                  
             </div>
        </div>
      
    </div>
  </template>
  
  <script setup>
    import { ref,reactive, onMounted,getCurrentInstance,defineProps } from "vue";
    const { proxy } = getCurrentInstance();
    import { regionData } from 'element-china-area-data'
    const selectedOptions = ref([])
    const props = defineProps({
          info: {
              type: Object,
              default: null,
          },
      })
      let emit = defineEmits(["trySee"]);
      const purchase = (item) => {
          emit("purchase",item);
      };
      const trySee = (item) => {
          emit("trySee",item.title);
      };
      const goInfo = (item) => {
          emit("goInfo",item.title);
      };
      const num = ref(1)
        const handleChange = (value) => {
        }
  </script>
  
  <style lang='less' scoped>
  .p-t{
    display: flex;
    align-items: center;
    span{
        font-size: 16px;
        margin-right: 18px;
        color: #8d8d8d;
    }
  }
  .count{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .title{
          font-size: 26px;
          font-weight: bold;
          text-align: left;
      }
      .desc{
          font-size: 14px;
          color: #8d8d8d;
          line-height: 20px;
          text-align: left;
          margin-top: 17px;
      }
      .price{
          display: flex;
          .p1{
              display: flex;
              align-items: flex-end;
              .p1-1{
                  font-size: 16px;
                  color: #d10b00;
              }
              .p1-2{
                  font-size: 20px;
                  color: #d10b00;
                  font-weight: bold;
              }
              
          }
          
          .p2{
              font-size: 16px;
              margin-left: 20px;
              text-decoration: line-through;
          }
      }
      .btn{
          display: flex;
          margin-top: 25px;
          .btn1{
              width: 98px;
              height: 32px;
              line-height: 32px;
              color: #fff;
              font-size: 14px;
              background: #d10b00;
              border-radius: 30px;
              text-align: center;
          }
          .btn2{
              width: 98px;
              height: 32px;
              line-height: 32px;
              color: #d10b00;
              border:1px solid #d10b00;
              font-size: 14px;
              background: #fff2f1;
              border-radius: 30px;
              margin-left: 20px;
              text-align: center;
          }
      }
  }
  </style>
  